<template>
    <el-dialog v-model="dialogVisible" title="新增抽取信息" width="700px">
        <el-form :model="editForm">
            <el-form-item label="项目名称">
                <el-select v-model="editForm.project" placeholder="请选择项目">
                    <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project" />
                </el-select>
            </el-form-item>
            <el-form-item label="目前从事专业">
                <el-select v-model="editForm.currentProfession" placeholder="请选择目前从事专业" value-key="id">
                    <el-option v-for="profession in professionList" :key="profession.id" :label="profession.name"
                        :value="profession"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="抽取人数">
                <el-input v-model="editForm.selectionCount" type="number" />
                <!--
                 <el-date-picker v-model="editForm.selectionCount" type="date" value-format="yyyy-MM-dd" />
                -->
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveExtraction">保存</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { addExtraction, getAllProfessions, getAllProjects } from '@/alova/api';
import { ElLoading, ElMessage } from 'element-plus';
import { defineEmits, ref } from 'vue';

const loading = ref(false);
const dialogVisible = ref(false)
const professionList = ref([]);
const editForm = ref({
    project: null,
    currentProfession: '',
    selectionCount: 0
})
const projects = ref([])
const emit = defineEmits(['ExtractionCreated']);

const getProfessions = async () => {
    loading.value = true; // 开始加载
    const loader = ElLoading.service({
        fullscreen: true,
        text: "数据加载中...",
    });
    getAllProfessions().then(data => {
        loading.value = false;
        professionList.value = data;
    }).catch(error => {
        console.error("查询失败:", error);
    }).finally(() => {
        loading.value = false; // 结束加载
        loader.close(); // 关闭加载动画
    });
};

const openDialog = () => {
    dialogVisible.value = true;
    getProfessions();
};

// 获取项目列表
const fetchProjects = async () => {
    loading.value = true; // 开始加载
    const loader = ElLoading.service({
        fullscreen: true,
        text: "数据加载中...",
    });
    getAllProjects().then(data => {
        loading.value = false;
        projects.value = data;
    }).catch(error => {
        console.error("查询Project失败:", error);
        ElMessage.error('获取项目列表失败')
    }).finally(() => {
        loading.value = false; // 结束加载
        loader.close(); // 关闭加载动画
    });
}

fetchProjects()

const saveExtraction = async () => {
    console.log('新增抽取信息:', editForm.value);
    dialogVisible.value = false;
    try {
        await addExtraction(editForm.value);
        dialogVisible.value = false;
        emit('ExtractionCreated'); // 通知父组件刷新数据
    } catch (error) {
        console.error('新增抽取失败', error);
        ElMessage.error('新增抽取失败')
    }
};
defineExpose({ openDialog });
</script>